<script setup lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import { useRoute } from "vue-router";
import { Ref, watch, computed, onMounted, ref } from "vue";
import { useI18n } from "vue-i18n";
import { useLocaleSetting } from '@/events/settings'
import { listen } from "@tauri-apps/api/event";
import { SystemInfo, ResponseData, SettingMap } from "./entity/entitys";
import { appConfigInfo } from "./store/appConfigInfo";
import { sendNotification } from "@tauri-apps/plugin-notification";
import { invoke } from '@tauri-apps/api/core';

const userStore = appConfigInfo();
// I18n
const { t, locale } = useI18n()
const savedLocale = useLocaleSetting()
const isTauri = !!(window as any).__TAURI__
/**
 * 在 Tauri 中阻止拖动，如需允许拖动，请在组件上使用 `@dragstart.stop` 属性
 * @param event
 */
function onDragStart(event: DragEvent) {
  if (isTauri) event.preventDefault()
}
const route = useRoute()

//路由名称
const routeName = computed(() => route.path.match('/[^/]+')?.[0] ?? '');

// 应用标题，动态切换不同标题
const appName = ref<string>(t('appName'))
// provide('appName', appName)

// //监控显示模式变换
// const displayMode = useDisplayMode()
// provide('displayMode', displayMode)

let greetMsg = ref<SystemInfo>({ memory_total: 0, memory_used: 0, cpu_used: '0', hostname: '', cpus: 0 })
async function listen_to_greet() {
  await listen('app_info_notification', (event: any) => {
    // event.payload 才是实际的结构体
    greetMsg.value = event.payload;
    console.log("event.payload:", event.payload)
    //sendNotification('Notification title');
    // new Notification('Notification title', {
    //   body: 'This is the notification body'
    // })
  });
}

// watch(
//   savedLocale,
//   (newLocale) => {
//     locale.value = newLocale
//     document.documentElement.setAttribute('lang', newLocale)
//   },
//   { immediate: true }
// )

onMounted(() => {
  listen_to_greet()
  if (userStore.appConfig.length < 1) {
    invoke('query_setting_list').then((res): void => {
      let res_ = res as ResponseData<Array<SettingMap>>
      let data = res_.data as Array<SettingMap>;
      userStore.setAppConfig(data);
      locale.value = userStore.getLanguage ?? "zh_CN";
    })
  }
})
</script>

<template>
  <div id="app">
    <transition name="fade">
      <keep-alive>
        <router-view />
      </keep-alive>
    </transition>
  </div>
</template>
<style lang="scss" scoped>
// .overflow-hidden{
//   overflow: hidden;
// }
// * {
//   scrollbar-width: none; /* 针对 Firefox */
//   -ms-overflow-style: none; /* 针对 IE/Edge */
//   &::-webkit-scrollbar { /* 针对 Chrome, Safari 和 Opera */
//     display: none;
//   }
// }
// ::-webkit-scrollbar {
//   width: 0 !important;
// }

// ::-webkit-scrollbar {
//   width: 0 !important;
//   height: 0;
// }

// //设置绝对位置，方便设置动画，屏蔽了浏览器本身的文档滚动。因此需要在每个页面都添加滚动布局。
// .layout {
//   position: absolute !important;
//   width: 100%;
//   height: 100%;
//   overflow: hidden;
// }

// 防止移动端出现滚动条
// .root {
//   height: 100%;
//   width: 100%;
//   overflow: hidden;
//   position: absolute;
// }

// .main {
//   position: relative;
//   width: 100%;
//   height: 100%;
//   background-color: transparent;
// }

// .splash {
//   position: absolute;
//   width: 100%;
//   height: 100%;
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   flex-direction: column;

//   .logo {
//     width: 72px;
//     height: 72px;
//     margin-bottom: 16px;
//     flex: none;
//   }
// }

#app {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  //border-radius: 10px 10px !important;
  //background-color: #aa2727;
}
</style>
